<template>
  <div style="width: 100%">
    <el-table :data="tableData" height="100%" style="width: 100%">
      <el-table-column
        v-for="item in tableConfig"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :formatter="item.formatter"
        show-overflow-tooltip
      >
        <template #default="scope" v-if="item.type === 'password'">
          <div style="display: flex; align-items: center">
            <!-- 输入框 -->
            <el-input
              v-model="scope.row[item.prop]"
              :type="scope.row._token ? 'text' : 'password'"
              placeholder="Please input"
              :disabled="true"
            />

            <!-- 显示密码图标 -->
            <el-icon
              v-if="!scope.row._token"
              @click="togglePasswordVisibility(scope.row)"
            >
              <View />
            </el-icon>

            <!-- 隐藏密码图标 -->
            <el-icon
              v-if="scope.row._token"
              @click="togglePasswordVisibility(scope.row)"
            >
              <Hide />
            </el-icon>
          </div>
        </template>
        <template #default="scope" v-if="item.type === 'switch'">
          <el-switch
            v-model="scope.row[item.prop]"
            class="ml-2"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
            @change="changeStatus(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240" v-if="options">
        <template #default="scope">
          <div v-for="items in optionList">
            <div
              v-if="items.option === 'delete'"
              v-permission="`${items.permission}`"
            >
              <el-popconfirm
                :title="`确定删除${scope.row.name || scope.row.order_id}吗？`"
                @confirm="go(scope, items.option)"
              >
                <template #reference>
                  <el-button :type="items.type">{{ items.name }}</el-button>
                </template>
              </el-popconfirm>
            </div>
            <div v-if="items.option === 'permission'">
              <el-button :type="items.type" @click="go(scope, items.option)">
                {{ items.name }}
              </el-button>
            </div>
            <div
              v-if="items.option === 'edit'"
              v-permission="`${items.permission}`"
            >
              <el-button :type="items.type" @click="go(scope, items.option)">
                {{ items.name }}
              </el-button>
            </div>
            <div
              v-if="items.option === 'info'"
              v-permission="`${items.permission}`"
            >
              <el-button :type="items.type" @click="go(scope, items.option)">
                {{ items.name }}
              </el-button>
            </div>
            <div
              v-if="items.option === 'distribution'"
              v-permission="`${items.permission}`"
            >
              <el-button :type="items.type" @click="go(scope, items.option)">
                {{ items.name }}
              </el-button>
            </div>
            <div
              v-if="items.option === 'finish'"
              v-permission="`${items.permission}`"
            >
              <el-button :type="items.type" @click="go(scope, items.option)">
                {{ items.name }}
              </el-button>
            </div>
            <div
              v-if="
                items.option !== 'delete' &&
                items.option !== 'permission' &&
                items.option !== 'edit' &&
                items.option !== 'info' &&
                items.option !== 'distribution' &&
                items.option !== 'finish'
              "
            >
              <el-button :type="items.type" @click="go(scope, items.option)">
                {{ items.name }}
              </el-button>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  components: {},
  props: {
    // Form列配置项
    tableConfig: {
      default: [
        {
          prop: "nihao",
          label: "你好",
          width: "150",
        },
        {
          prop: "nihao",
          label: "你好",
          width: "150",
        },
      ] as any,
    },
    // Form初始空数据
    tableData: {
      default: {} as any,
    },
    // 是否展示操作列
    options: {
      default: true,
    },
    // 操作列配置项
    optionList: {
      default: [
        { type: "primary", name: "人员", option: "person" },
        { type: "success", name: "编辑", option: "edit" },
        { type: "danger", name: "删除", option: "delete" },
      ] as any,
    },
  },
  setup(props, { emit }) {
    const go = (scope: any, option: String) => {
      emit("clickBtn", scope, option);
    };
    const togglePasswordVisibility = (row: any) => {
      row._token = !row._token;
    };
    const changeStatus = (row: any) => {
      emit("changeStatus", row);
    };
    return { go, togglePasswordVisibility, changeStatus };
  },
});
</script>
<style scoped>
.el-table /deep/ td.el-table__cell div {
  box-sizing: border-box;
  display: flex;
  margin-right: 5px;
}
</style>
